<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <title>卷帘</title>
    <style>
        @import url(../templates/bucket.css);

        #slider {
            position: absolute;
            left: 50%;
            top: 0px;
            background-color: #d3d3d3;
            width: 5px;
            height: 100%;
            z-index: 9999;
        }

        #slider:hover {
            cursor: ew-resize;
        }
    </style>

</head>

<body>
    <div id="cesiumContainer" class="fullSize">
        <div id="slider"></div>
    </div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
</body>
<script>
    const viewer = new Cesium.Viewer("cesiumContainer", {
        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //     url:
        //         "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        // }),
        baseLayerPicker: false,
        animation: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        sceneModePicker: false,
        timeline: false,
        navigationHelpButton: false,
        geocoder: false, //是否显示地名查找控件 
        infoBox: false,
    });
    //去掉logo
    viewer.cesiumWidget.creditContainer.style.display = "none"
    const layers = viewer.imageryLayers;
    const earthAtNight = layers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
    );
    earthAtNight.splitDirection = Cesium.SplitDirection.LEFT; // Only show to the left of the slider.

    // Sync the position of the slider with the split position
    const slider = document.getElementById("slider");
    viewer.scene.splitPosition =
        slider.offsetLeft / slider.parentElement.offsetWidth;

    const handler = new Cesium.ScreenSpaceEventHandler(slider);

    let moveActive = false;

    function move(movement) {
        if (!moveActive) {
            return;
        }

        const relativeOffset = movement.endPosition.x;
        const splitPosition =
            (slider.offsetLeft + relativeOffset) /
            slider.parentElement.offsetWidth;
        slider.style.left = `${100.0 * splitPosition}%`;
        viewer.scene.splitPosition = splitPosition;
    }

    handler.setInputAction(function () {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    handler.setInputAction(function () {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.PINCH_START);

    handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

    handler.setInputAction(function () {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
    handler.setInputAction(function () {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.PINCH_END);
</script>

</html>